<div class="page-header">
    <h4>
        <i class="glyphicon glyphicon-signal"></i>
        文章管理
    </h4>
</div>

<div class="row" id="">
    <div class="col-xs-12">
        <div id="gridview" class="gridview">
            <div class="grid-filter">
                <input type="text input-sm" style="height: 29px" class="txt" name="title" placeholder="标题" />
                <input type="text input-sm" style="height: 29px" class="txt" name="auth" placeholder="发布者" />

                <select name="status" style="height: 29px;width: 160px;display:none;" >
                    <option value="0">请选择状态</option>
                    <option value="1">已保存</option>
                    <option value="2">已提交</option>
                    <option value="3">已审核</option>
                </select>
                <input type="text input-sm" style="height: 29px" id="datepicker1" class="txt" name="startDate" placeholder="开始时间" />
                <input type="text input-sm" style="height: 29px" id="datepicker2" class="txt" name="endDate" placeholder="结束时间" />
                <a class="btn btn-xs btn-action btn-purple" data-action="search" style="margin-top: -2px;margin-left: 10px;"><i class="ace-icon fa fa-search"></i>搜索</a>
            </div>
            {{include file="/inc/module_action.html"}}

            <div class="grid-table">
                <table class="table table-striped table-bordered table-hover table-list table-tree">
                    <thead>
                    <tr>
                        <th width="50">
                            <label class="position-relative">
                                <input type="checkbox" class="ace grid-cb-all" />
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th width="100">编号</th>
                        <th>标题</th>
                        <th>本文链接</th>
                        <th>作者</th>
                        <th>发布时间</th>
                        <th>发布者</th>
                        <th>状态</th>
                        <th>排序号</th>
                        <th width="120">操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td colspan="11">
                            <div class='loading'><i class='ace-icon fa fa-spinner bigger-200 orange'></i><span class="text">正在加载</span></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="pagination-box">

                </div>
            </div>

            <div class="grid-form search-form "></div>

        </div>
        <div id="qr-dialog" class="modal" style="display: none;">
            <div class="modal-dialog" style="width:300px;">
                <div class="modal-content">
                    <div class="modal-body">
                        <div id="img" style="padding:35px"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<script type="text/javascript" src="{{$contextPath}}/resource/admin/js/qrcode.js"></script>
<script type="text/javascript" src="{{$contextPath}}/resource/admin/js/jquery.qrcode.js"></script>
<!-- page specific plugin scripts -->
<script type="text/javascript">
    $('.page-content-area').ace_ajax('loadScripts', [null, null], function() {
        $( "#datepicker1" ).datepicker({
            showOtherMonths: true,
            selectOtherMonths: false
        });

        $( "#datepicker2" ).datepicker({
            showOtherMonths: true,
            selectOtherMonths: false
        });

        $("#gridview").on("click", "a.qrcode", function () {
            $('#img').empty().qrcode({
                width:200,
                height:200,
                text:$(this).html()
            });
        });

        $("#gridview").gridview({
            url: "sfarticle/list.do",
            form:{
                url: "sfarticle/action.do"
            },
            jsonReader:{
                key_field: 'articleId'
            },
            columns:[{
                name:"checkbox"
            },{
                name:"articleId"
            },{
                name:"title"
            },{
                name:"articleUrl",
                format: function(opts, column, row){
                    return "<td><a title='点击生成二维码' class='qrcode' href='#qr-dialog' data-toggle='modal'>http://sf.idzlz.com/wx/article/" + row["articleId"] + "</a></span></td>";
                }
            },{
                name:"auth"
            },{
                name:"addTime"
            },{
                name:"userName"
            },{
                name:"status"
            },{
                name: "sortOrder",
                format: function(opts, column, row){
                    return "<td><span class='label label-sm label-info arrowed arrowed-righ'>" + row[column.name] + "</span></td>";
                }
            },{
                name:"actions",
                list:["edit", "delete", "view"]
            }],
            buttons:{
                add:{
                    handler: function(){
                        changeHash("page/sfarticle/add");
                    }
                },
                edit:{
                    handler: function(key){
                        key = key || this.gridview("getKey");
                        if(!key){
                            showTip("请选择记录");
                            return;
                        }
                        changeHash("page/sfarticle/edit/" + key);
                    }
                },
                view:{
                    handler: function(key){
                        key = key || this.gridview("getKey");
                        if(!key){
                            showTip("请选择记录");
                            return;
                        }
                        changeHash("page/sfarticle/view/" + key);
                    }
                }
            }
        });
    });

</script>